<template>
  <div class="banlance">
    <div class="card-search">
      <el-form
        size="small"
        :inline="true"
        class="demo-form-inline"
        label-height="80px"
      >
        <el-form-item label="工单类型">
          <el-select
            v-model="workOrderType"
            placeholder="请选择工单类型"
            style="width: 175px"
            filterable
            clearable
            @change="getData"
          >
            <el-option label="流转" value="流转"></el-option>
            <el-option label="入库" value="入库"></el-option>
            <el-option label="出库" value="出库"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品类型">
          <el-select
            v-model="mold"
            placeholder="请选择产品类型"
            style="width: 175px"
            filterable
            clearable
          >
            <el-option label="电极" value="电极"></el-option>
            <el-option label="坩埚" value="坩埚"></el-option>
            <el-option label="接头" value="接头"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工艺" prop="name">
          <el-select
            filterable
            clearable
            v-model="createform.Craft"
            placeholder="请选择工艺"
            style="width: 175px"
          >
            <el-option
              v-for="(item, index) in form.CraftData"
              :key="index"
              :label="item.dates"
              :value="item.dates"
              :index="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="型号" prop="name">
          <el-select
            style="width: 175px"
            filterable
            clearable
            v-model="createform.WhatModel"
            placeholder="请选择型号"
          >
            <el-option
              v-for="(item, index) in form.WhatModelData"
              :key="index"
              :label="item.dates"
              :value="item.dates"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="直径" prop="name">
          <el-select
            style="width: 160px"
            filterable
            clearable
            v-model="createform.Diameter"
            placeholder="请选择直径"
          >
            <el-option
              v-for="(item, index) in form.DiameterData"
              :key="index"
              :label="item.dates"
              :value="item.dates"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="正次品" prop="name">
          <el-select
            filterable
            clearable
            v-model="createform.GoodOrBad"
            placeholder="请选择正次品"
            style="width: 175px"
          >
            <el-option label="正品" value="正品"></el-option>
            <el-option label="次品" value="次品"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button icon="el-icon-search" type="primary" @click="getData"
            >查询</el-button
          >
          <el-button icon="el-icon-refresh" type="primary" @click="reset"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="card-table">
      <el-table
        :header-cell-style="getRowClass"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column align="center" type="index" label="序号" width="100">
        </el-table-column>
        <el-table-column
          v-for="(item, index) in workOrderType === '入库'
            ? tableDataListru
            : workOrderType === '出库'
            ? tableDataListchu
            : tableDataList"
          :index="index"
          :key="item.id"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          align="center"
        >
        </el-table-column>
        <el-table-column align="center" label="操作" width="180">
          <template slot-scope="{ row }">
            <el-button
              icon="el-icon-document-remove"
              style="padding: 10px"
              type="primary"
              @click="modify(row)"
              >修改</el-button
            >
            <el-button
              icon="el-icon-document-add"
              style="padding: 10px"
              type="primary"
              @click="deleteOne(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagin" v-if="total > pageSize">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <xiugai
        :type="workOrderType"
        :row="xiugaiData"
        :diasbled="dialogVisibleLiu"
        @dialogQuxiao="change"
      ></xiugai>
      <liuzhuan
        :dialogVisible="dialogVisiblesa"
        :names="workOrderType"
        :rowa="xiugaiData"
        @dialogQuxiao="change"
      ></liuzhuan>
    </div>
  </div>
</template>

<script>
import {
  NewLIUZHUANget,
  CraftgetAll,
  NewLIUZHUANdelete,
} from "@/api/stock/banlance3.js";
import { WhatModelgetAll } from "@/api/stock/whatmodel.js";
import { DiametergetAll } from "@/api/stock/diameter.js";
import xiugai from "./xiugai.vue";
import liuzhuan from "../add/liuzhuan.vue";
export default {
  data() {
    return {
      //分页
      total: 0,
      currPage: 1,
      pageSize: 10,
      //表格
      tableData: [],
      tableDataList: [
        { id: 15, prop: "workOrderType", label: "工单类型", width: "100" },

        {
          id: 1,
          prop: "affiliation",
          label: "归属来源",
          width: "width",
        },
        {
          id: 123,
          prop: "affiliationOut",
          label: "归属去向",
          width: "width",
        },
        { id: 2, prop: "originCraft", label: "工艺来源", width: "100" },
        { id: 17, prop: "goWhereCraft", label: "工艺去向", width: "100" },
        { id: 22, prop: "diameterOut", label: "直径来源", width: "100" },
        { id: 3, prop: "diameterIn", label: "直径去向", width: "100" },
        { id: 4, prop: "lengthOut", label: "长度来源", width: "100" },
        { id: 19, prop: "lengthIn", label: "长度去向", width: "100" },
        { id: 5, prop: "mold", label: "类型来源", width: "100" },
        { id: 23, prop: "moldOut", label: "类型去向", width: "100" },
        { id: 6, prop: "number", label: "数量", width: "100" },
        { id: 8, prop: "outside", label: "外协地", width: "100" },
        { id: 9, prop: "good", label: "正次品来源", width: "100" },
        { id: 21, prop: "goodOut", label: "正次品去向", width: "100" },
        { id: 10, prop: "whatModel", label: "型号来源", width: "100" },
        { id: 16, prop: "whatModelOut", label: "型号去向", width: "100" },

        { id: 13, prop: "status", label: "状态来源", width: "100" },
        { id: 27, prop: "statusOut", label: "状态去向", width: "100" },
        { id: 14, prop: "Customer", label: "客户", width: "100" },
        { id: 18, prop: "lotNumber", label: "批号", width: "100" },
        { id: 20, prop: "inputPeople", label: "填写人", width: "100" },
        { id: 11, prop: "creatTime", label: "创建时间", width: "120" },
        { id: 12, prop: "remark", label: "备注", width: "100" },
      ],
      tableDataListru: [
        { id: 15, prop: "workOrderType", label: "工单类型", width: "90" },

        {
          id: 1,
          prop: "affiliationOut",
          label: "归属",
          width: "width",
        },
        { id: 17, prop: "goWhereCraft", label: "工艺", width: "80" },
        { id: 3, prop: "diameterIn", label: "直径", width: "80" },
        { id: 19, prop: "lengthIn", label: "长度", width: "80" },
        { id: 23, prop: "moldOut", label: "类型", width: "80" },
        { id: 6, prop: "number", label: "数量", width: "80" },
        { id: 8, prop: "outside", label: "外协地", width: "80" },
        { id: 21, prop: "goodOut", label: "正次品", width: "80" },
        { id: 16, prop: "whatModelOut", label: "型号", width: "80" },
        { id: 27, prop: "statusOut", label: "状态", width: "80" },
        { id: 14, prop: "Customer", label: "客户", width: "80" },
        { id: 18, prop: "lotNumber", label: "批号", width: "80" },
        { id: 20, prop: "inputPeople", label: "填写人", width: "90" },
        { id: 11, prop: "creatTime", label: "创建时间", width: "100" },
        { id: 12, prop: "remark", label: "备注", width: "90" },
      ],
      tableDataListchu: [
        { id: 15, prop: "workOrderType", label: "工单类型", width: "100" },
        {
          id: 1,
          prop: "affiliation",
          label: "归属",
          width: "width",
        },

        { id: 2, prop: "originCraft", label: "工艺", width: "80" },
        { id: 22, prop: "diameterOut", label: "直径", width: "80" },
        { id: 4, prop: "lengthOut", label: "长度", width: "80" },
        { id: 5, prop: "mold", label: "类型", width: "80" },
        { id: 6, prop: "number", label: "数量", width: "80" },
        { id: 8, prop: "outside", label: "外协地", width: "80" },
        { id: 9, prop: "good", label: "正次品", width: "80" },
        { id: 10, prop: "whatModel", label: "型号", width: "80" },

        { id: 13, prop: "status", label: "状态", width: "80" },
        { id: 14, prop: "Customer", label: "客户", width: "80" },
        { id: 18, prop: "lotNumber", label: "批号", width: "80" },
        { id: 20, prop: "inputPeople", label: "填写人", width: "80" },
        { id: 11, prop: "creatTime", label: "创建时间", width: "110" },
        { id: 12, prop: "remark", label: "备注", width: "90" },
      ],
      //表单
      form: {
        DiameterData: [],
        CraftData: [],
        WhatModelData: [],
      },
      mold: "",
      workOrderType: "入库",
      createform: {},
      dialogVisibles: false,
      churuDialogVisible: false,
      name: "",
      rows: 1,
      //修改
      xiugaiData: "",
      xiugaiType: "",
      dialogVisibleLiu: false,
      dialogVisiblesa: false,
    };
  },
  components: { xiugai, liuzhuan },

  async created() {
    this.getData();
    //获取工艺
    CraftgetAll().then((res) => {
      const pageData = res.data.data.pageData;
      pageData.forEach((element) => {
        this.form.CraftData.push(element);
      });
    });
    //获取型号
    WhatModelgetAll().then((res) => {
      const pageData = res.data.data.pageData;
      pageData.forEach((element) => {
        this.form.WhatModelData.push(element);
      });
    });
    //获取直径
    DiametergetAll().then((res) => {
      const pageData = res.data.data.pageData;
      pageData.forEach((element) => {
        this.form.DiameterData.push(element);
      });
    });
  },
  watch: {},
  methods: {
    async getData() {
      let params;
      if (this.workOrderType === "入库") {
        params = {
          pageSize: this.pageSize,
          currPage: this.currPage,
          goWhereCraft: this.createform.Craft,
          diameterIn: this.createform.Diameter,
          whatModelOut: this.createform.WhatModel,
          goodOrBad: this.createform.GoodOrBad,
          moldOut: this.mold,
          workOrderType: this.workOrderType,
        };
      } else {
        params = {
          pageSize: this.pageSize,
          currPage: this.currPage,
          originCraft: this.createform.Craft,
          diameterOut: this.createform.Diameter,
          whatModel: this.createform.WhatModel,
          good: this.createform.GoodOrBad,
          mold: this.mold,
          workOrderType: this.workOrderType,
        };
      }
      console.log(params, 123);
      const { data } = await NewLIUZHUANget(params);
      console.log(data, 123);
      this.total = data.data.total;
      this.tableData = data.data.pageData;
    },
    //删除工单
    deleteOne(row) {
      console.log(row._id, "row");
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const params = {
            _id: row._id,
          };
          console.log(params);
          NewLIUZHUANdelete(params).then((res) => {
            if (res.data.code === 200) {
              this.$message({
                type: "success",
                message: "删除成功",
              });
              this.getData();
            } else {
              this.$message({
                type: "warning",
                message: res.data.message,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    change() {
      console.log(111);
      this.getData();
      this.xiugaiData = 1;
      this.dialogVisibleLiu = false;
      this.dialogVisiblesa = false;
    },
    //修改工单
    modify(row) {
      this.xiugaiData = row;
      if (this.workOrderType != "流转") {
        this.dialogVisibleLiu = true;
      } else {
        this.dialogVisiblesa = true;
      }
    },
    reset() {
      this.createform = {};
      this.mold = "";
      this.getData();
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currPage = val;
      this.getData();
    },
  },
};
</script>

<style  scoped>
.banlance {
  .pagin {
    display: flex;
    justify-content: right;
    padding: 12px 12px 0 0;
  }
  .pagin  .el-pager .active {
    background-color: $primary !important;
  }
}
</style>
